{% extends "base.html" %}

{% block title %}新建架构方案{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="mb-3">新建架构方案</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('main.architecture_list') }}">系统架构</a></li>
                    <li class="breadcrumb-item active">新建方案</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <form method="post" id="createForm">
                <!-- 基本信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">基本信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="project_id" class="form-label">所属项目 <span class="text-danger">*</span></label>
                            <select class="form-select" id="project_id" name="project_id" required>
                                <option value="">请选择项目</option>
                                {% for project in projects %}
                                <option value="{{ project.id }}">{{ project.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">方案名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required
                                   minlength="2" maxlength="128">
                            <div class="form-text">2-128个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="architecture_type" class="form-label">架构类型 <span class="text-danger">*</span></label>
                            <select class="form-select" id="architecture_type" name="architecture_type" required>
                                <option value="centralized">集中式</option>
                                <option value="distributed">分布式</option>
                                <option value="hybrid">混合式</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">方案描述</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 系统拓扑 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">系统拓扑</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addTopologyNode()">
                            <i class="fas fa-plus me-1"></i>添加节点
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="topologyNodes">
                            <!-- 动态添加的节点将显示在这里 -->
                        </div>
                        <input type="hidden" id="topology" name="topology" value="[]">
                    </div>
                </div>

                <!-- 系统组件 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">系统组件</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addComponent()">
                            <i class="fas fa-plus me-1"></i>添加组件
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="components">
                            <!-- 动态添加的组件将显示在这里 -->
                        </div>
                        <input type="hidden" id="componentsData" name="components" value="[]">
                    </div>
                </div>

                <!-- 通信方式 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">通信方式</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addCommunication()">
                            <i class="fas fa-plus me-1"></i>添加协议
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="communications">
                            <!-- 动态添加的通信协议将显示在这里 -->
                        </div>
                        <input type="hidden" id="communicationData" name="communication" value="[]">
                    </div>
                </div>

                <div class="d-flex gap-2 mb-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>创建方案
                    </button>
                    <a href="{{ url_for('main.architecture_list') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>取消
                    </a>
                </div>
            </form>
        </div>

        <div class="col-md-4">
            <!-- 帮助信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">创建说明</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle mb-2">基本信息</h6>
                    <p class="card-text small">
                        首先选择所属项目，然后填写方案的基本信息。方案名称和架构类型为必填项。
                        方案名称长度需要在2-128个字符之间。
                    </p>
                    
                    <h6 class="card-subtitle mb-2">系统拓扑</h6>
                    <p class="card-text small">
                        点击"添加节点"按钮来添加系统中的节点。每个节点需要填写名称和类型。
                        您可以根据需要添加多个节点，也可以删除不需要的节点。
                    </p>
                    
                    <h6 class="card-subtitle mb-2">系统组件</h6>
                    <p class="card-text small">
                        点击"添加组件"按钮来添加系统使用的组件。每个组件包含名称、类型和配置参数。
                        配置参数可以为空。您可以根据需要添加或删除组件。
                    </p>
                    
                    <h6 class="card-subtitle mb-2">通信方式</h6>
                    <p class="card-text small">
                        点击"添加协议"按钮来配置系统中使用的通信协议。每个协议需要填写名称和类型，
                        可以选择性地添加协议参数。您可以根据需要添加或删除协议。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 系统拓扑相关函数
function addTopologyNode() {
    const nodes = JSON.parse(document.getElementById('topology').value || '[]');
    nodes.push({ name: '', type: '' });
    updateTopologyNodes(nodes);
}

function updateTopologyNodes(nodes) {
    const container = document.getElementById('topologyNodes');
    container.innerHTML = nodes.map((node, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="节点名称"
                       value="${node.name}" onchange="updateNodeName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="节点类型"
                       value="${node.type}" onchange="updateNodeType(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeNode(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function updateNodeName(index, value) {
    const nodes = JSON.parse(document.getElementById('topology').value);
    nodes[index].name = value;
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function updateNodeType(index, value) {
    const nodes = JSON.parse(document.getElementById('topology').value);
    nodes[index].type = value;
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function removeNode(index) {
    const nodes = JSON.parse(document.getElementById('topology').value);
    nodes.splice(index, 1);
    updateTopologyNodes(nodes);
}

// 系统组件相关函数
function addComponent() {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components.push({ name: '', type: '', config: '' });
    updateComponents(components);
}

function updateComponents(components) {
    const container = document.getElementById('components');
    container.innerHTML = components.map((component, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="组件名称"
                       value="${component.name}" onchange="updateComponentName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="组件类型"
                       value="${component.type}" onchange="updateComponentType(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="配置参数"
                       value="${component.config || ''}" onchange="updateComponentConfig(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeComponent(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentName(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value);
    components[index].name = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentType(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value);
    components[index].type = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentConfig(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value);
    components[index].config = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function removeComponent(index) {
    const components = JSON.parse(document.getElementById('componentsData').value);
    components.splice(index, 1);
    updateComponents(components);
}

// 通信方式相关函数
function addCommunication() {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols.push({ name: '', type: '', params: '' });
    updateCommunications(protocols);
}

function updateCommunications(protocols) {
    const container = document.getElementById('communications');
    container.innerHTML = protocols.map((protocol, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="协议名称"
                       value="${protocol.name}" onchange="updateProtocolName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="协议类型"
                       value="${protocol.type}" onchange="updateProtocolType(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="协议参数"
                       value="${protocol.params || ''}" onchange="updateProtocolParams(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCommunication(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolName(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value);
    protocols[index].name = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolType(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value);
    protocols[index].type = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolParams(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value);
    protocols[index].params = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function removeCommunication(index) {
    const protocols = JSON.parse(document.getElementById('communicationData').value);
    protocols.splice(index, 1);
    updateCommunications(protocols);
}
</script>
{% endblock %} 